<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品基本信息</title>
  <!--使用elementui 必须引入vue-->
  <script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
  <!-- ele引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- ele引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
  <span>商品基本信息</span><br>
  <el-row>
    <el-col :span="6"><span>商品名： </span>
      <el-input v-model="input" style=" width :200px" placeholder="请输入商品名称"></el-input>
    </el-col>
    <el-col :span="6"><span>商品号： </span>
      <el-input v-model="input" style=" width :200px" placeholder="请输入商品编号"></el-input>
    </el-col>
    <el-col :span="6">
      <el-button type="primary">查询</el-button>
      <br></el-input></el-col>
  </el-row>

  <template style="height: 1000px">
    <el-table
      :data="tableData"
      height="250"
      border
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>
</div>

<script>
  var v = new Vue({
    el: "#app",

    data() {
      return {
        input: '',
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  });
</script>
</body>
</html>
